<template>
  <div>
    <table>
      <tr>
        <td colspan="2"><h2>填写新商品的信息</h2></td>
      </tr>
      <tr>
        <td>商品编号</td>
        <td>
          <input
            type="text"
            v-model.number="id" />
        </td>
      </tr>
      <tr>
        <td>商品名称</td>
        <td>
          <input
            type="text"
            v-model="title" />
        </td>
      </tr>
      <tr>
        <td>商品产地</td>
        <td>
          <input
            type="text"
            v-model="city" />
        </td>
      </tr>
      <tr>
        <td>商品价格</td>
        <td>
          <input
            type="text"
            v-model="price" />
        </td>
      </tr>
      <tr>
        <td>数量</td>
        <td>
          <input
            type="text"
            v-model.number="quantity" />
        </td>
      </tr>
      <tr>
        <td colspan="2"><button @click="addCart">加入购物车</button></td>
      </tr>
    </table>
    <table>
      <thead>
        <tr>
          <td colspan="7"><h2>亿丰商城购物车</h2></td>
        </tr>
        <tr>
          <th>编号</th>
          <th>商品名称</th>
          <th>商品产地</th>
          <th>价格</th>
          <th>数量</th>
          <th>金额</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="g in goods"
          :key="g.id">
          <td>{{ g.id }}</td>
          <td>{{ g.title }}</td>
          <td>{{ g.city }}</td>
          <td>{{ g.price }}</td>
          <td>
            <button
              :disabled="g.count === 0"
              @click="increment({ id: g.id, count: -1 })">
              -
            </button>
            {{ g.count }}
            <button @click="increment({ id: g.id, count: 1 })">+</button>
          </td>
          <td>{{ itemPrice(g.id) }}</td>
          <td><button @click="deleteItem(g.id)">删除</button></td>
        </tr>
      </tbody>
    </table>
    <span>总价：￥{{ totalPrice }}</span>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex';
export default {
  name: 'ShoppingCart',
  data() {
    return {
      id: null,
      title: '',
      city: '',
      price: '',
      quantity: 1
    }
  },
  computed: {
    /* goods(){
      return this.$store.state.items;
    } */
    ...mapState('cart', {
      goods: 'items'
    }),
    ...mapGetters('cart', {
      itemPrice: 'cartItemPrice',
      totalPrice: 'cartTotalPrice'
    })
  },
  methods: {
    ...mapMutations('cart', {
      addItemToCart: 'pushItemToCart',
      increment: 'incrementItemCount'
    }),
    ...mapMutations('cart', ['deleteItem']),
    ...mapActions('cart', ['addItemToCart']),
    addCart() {
      //this.$store.commit('pushItemToCart', {
      /* this.addItemToCart({
        id: this.id,
        title: this.title,
        city: this.city,
        price: this.price,
        count: this.quantity
      }) */

      //this.$store.dispatch('addItemToCart', {
      this.addItemToCart({
        id: this.id,
        title: this.title,
        city: this.city,
        price: this.price,
        count: this.quantity
      })
      this.id = ''
      this.title = ''
      this.city = ''
      this.price = ''
    }
  }
}
</script>

<style scoped>
div {
  width: 800px;
}
table {
  border: 1px solid black;
  width: 100%;
  margin-top: 20px;
}
th {
  height: 50px;
}
th,
td {
  border-bottom: 1px solid #ddd;
  text-align: center;
}
span {
  float: right;
}
</style>
